extends common/layout
block content
    link(rel='stylesheet' type='text/css' href='../css/shop.min.css')
    link(rel='stylesheet' type='text/css' href='../css/refund-detail.min.css')
    include common/head
    div.refund-detail-container.shop-container
        include common/buyerNav
        div.refund-wrap
            div.refund-content
                p
                    span.gray-font 退款管理>
                    span 退款详情
                div.refund-b
                    div.open-step.four-b.clearfix
                        div.step-item.active
                            div.step-item-container
                                div.step-title
                                    div.step-item-cont
                                        div.step-item-num 1
                                        div.step-item-title 买家申请退款
                        div.step-item
                            div.step-item-container
                                div.step-title
                                    div.step-item-cont
                                        div.step-item-num 2
                                        div.step-item-title 卖家处理退款申请
                        div.step-item
                            div.step-item-container
                                div.step-title
                                    div.step-item-cont
                                        div.step-item-num 3
                                        div.step-item-title 买家退货
                        div.step-item
                            div.step-item-container
                                div.step-title
                                    div.step-item-cont
                                        div.step-item-num 4
                                        div.step-item-title 退款完毕
                    div.step-opt-cont
                        div.opt-item.clearfix
                            span 退款商品：
                            div.pro-group.clearfix
                                div.pro-item
                                    img(src="../image/main2.png")
                                    div.opt-pro-desc
                                        p 男士运动鞋男士运动鞋男士运鞋男士运动鞋男士运动鞋男士运动鞋男士运鞋男士运动鞋男士运动鞋男士运动鞋男士运鞋男士运动鞋
                                        p.gray-font
                                            span 尺寸: 37码
                                            span 颜色分类: 粉色
                                -for(var i = 0; i < 4; i++) {
                                div.pro-item.hidden
                                    img(src="../image/main2.png")
                                    p.price ￥29
                                -}
                            button.btn(data-toggle="modal" data-target="#changeModal") 添加和编辑
                        div.opt-item.clearfix
                            span 服务类型：
                            label
                                input(type="radio" checked)
                                | 退货退款
                        div.opt-item.clearfix
                            span 退款原因：
                            div.select-block
                                select
                                    option 请选择
                                    option 我不想买了
                                    option 信息填写错误，重新拍
                                    option 卖家缺货
                                    option 同城见面交易
                                    option 其他原因
                        div.opt-item.opt-price.clearfix
                            span 退款金额：
                            input.refund-price(type="text" placeholder="商品总价格，可以修改")
                        div.opt-item.clearfix
                            span 退款说明：
                            textarea
                        div.opt-item.clearfix
                            span 上传图片：
                            div.img-group
                                div.img-item
                                    img(src="../image/main2.png")
                                    span.iconfont &times;
                                div.img-item
                                    img(src="../image/main2.png")
                                    span.iconfont &times;
                                div.img-item-opt
                                    input(type="file")
                        div.btn-container
                            button.btn.btn-border-orange 提交
                    div.step-cont.hidden
                        div.step-t
                            <!-- 卖家处理退款申请 -->
                            p.tip.hidden 卖家同意，请退货给商家
                            div.btn-container.hidden
                                button.btn-orange 撤销退款申请
                            <!-- 买家退货 -->
                            p.tip 卖家同意
                            div.btn-container
                                button.btn-orange(data-toggle="modal" data-target="#logisticsModal") 填写物流信息

                            <!-- 退款成功 -->
                            p.tip.hidden 退款成功
                            p.hidden 退款成功时间：2018-09-09 12:34:45
                            p.hidden 退款总金额：￥454

                            <!-- 退款关闭 -->
                            p.tip.hidden 退款关闭
                            p.hidden 完成时间：2018-09-09 12:34:45
                        div.step-b
                            p 协商历史
                            div.step-pro-item.clearfix
                                img(src="../image/main2.png")
                                div.pro-item-desc
                                    p 大麦
                                    p 发起了仅退款申请。服务类型:仅退款；原因:拍错/多拍/不想要；金额: 44.90元
                                    p 退款说明:未填写
                                    div.pro-img-group
                                        img(src="../image/main2.png")
                                        img(src="../image/main2.png")
                                        img(src="../image/main2.png")
                                div.pro-time 2018-09-09 20:23:34
    div.modal.fade(id="changeModal")
        div.modal-dialog
            div.modal-content
                div.modal-header
                    span 继续添加要退货的商品，添加后可一起退货哦
                    button.close(type="button" data-dismiss="modal") &times;
                div.modal-body
                    -for(var i = 0; i < 4; i++) {
                    div.item-pro.clearfix
                        input(type="checkbox")
                        img(src="../image/main2.png")
                        div.item-pro-desc
                            p.title 男士运动鞋男士运动鞋男士运鞋男士运动鞋男士运动鞋男士运动鞋男士运鞋男士运动鞋男士运动鞋男士运动鞋男士运鞋男士运动鞋
                            p.price
                                span ￥
                                span.red-font 100.00
                    -}
                div.modal-footer
                    label
                        input.check-all(type="checkbox")
                        | 全选
                    div.btn-container
                        button.btn.btn-orange 确定
                        button.btn.btn-border-orange(data-dismiss="modal") 取消
    div.modal.fade(id="logisticsModal")
        div.modal-dialog
            div.modal-content
                div.modal-header
                    span 物流信息
                    button.close(type="button" data-dismiss="modal") &times;
                div.modal-body
                    div.input-item.clearfix
                        span 物流信息：
                        div.select-block
                            select
                                option 请选择
                                option 申通快速
                    div.input-item.clearfix
                        span 物流单号：
                        input(type="text")
                div.modal-footer
                    div.btn-container
                        button.btn.btn-border-orange(data-dismiss="modal") 取消
                        button.btn.btn-orange 确定


    script.
        $(".open-step .active").prevAll(".step-item").addClass("prev-active");
        $(".check-all").change(function () {
            if ($(this).get(0).checked) {
                $(".item-pro input[type='checkbox']").each(function () {
                    $(this).get(0).checked = true;
                })
            } else {
                $(".item-pro input[type='checkbox']").each(function () {
                    $(this).get(0).checked = false;
                })
            }
        })

        $(".refund-price").blur(function () {
            if ($(this).val() > 60) {
                alert("666");
            }
        });
